<template>
  <div class="gmPage">
    <div class="header">
   
      <div @click="close">{{ $t("close") }}</div>
    </div>
    <div class="card">
      <div class="font12 m_b_10">{{ $t("jszq") }} ( {{$t("divide")}})</div>
      <!-- <div style="color: var(--tradeGL)">
        <input
          type="text"
          class="input"
          v-model="prams.min"
          :placeholder="$t('qsr')"
        />
      </div> -->
      <van-popover placement="bottom-start" v-model:show="showPopover"  :theme="isDark==1?'dark':'light'" >
       <div v-for="(item,i) in props.confingList" :key="i" class="selectItem" @click="selectChange(item)">{{item.min}}</div> 
      <template #reference>
        <div  class="selectClass">{{ prams.min? prams.min:$t('qxz') }}</div>
      </template>
    </van-popover>
      <!-- <select v-model="prams.min" class="selectClass" @change="selectChange" v-if="props.confingList">
        <option value="">{{ $t('qxz') }}</option>
        <option :value="item.min" v-for="(item,i) in props.confingList" :key="i">{{item.min}}</option>
    </select> -->
    </div>
    <div class="card">
      <div class="font12 m_b_10">${{ $t("gmje") }}</div>
      <div style="color: var(--tradeGL)">
        <input
          type="text"
          class="input"
          v-model="prams.amount"
          :placeholder="$t('zdjye5')"
        />
      </div>
    </div>
    <div class="tstext" v-if="!props.checked">
      <div class="left">
        <img src="../../assets/tishi1.png" class="icon" alt="" />
        {{ $t("ky") }}
      </div>
      <div class="right">{{userInfos.usdtAmount}}</div>
    </div>
    <div class="tstext" v-if="props.checked">
      <div class="left">
        <img src="../../assets/tishi1.png" class="icon" alt="" />
        {{ $t("mlye") }}
      </div>
      <div class="right">{{userInfos.simUsdtAmount}}</div>
    </div>
    <!-- <div class="sliderModel">
      <div class="value">{{ value }}%</div>
      <van-slider v-model="value" bar-height="40px" class="slider">
        <template #button>
          <div class="custom-button"></div>
        </template>
      </van-slider>
      <div v-for="i in 10" class="line" :style="{ left: i * 10 + '%' }"></div>
    </div> -->
    <div class="tstext">
      <div class="left">
        <img src="../../assets/tishi1.png" class="icon" alt="" />
        {{ $t("yqlr") }}
      </div>
      <div class="right">{{(rate*prams.amount).toFixed(2) || 0}}</div>
    </div>
    <!-- <div class="tstext">
      <div class="left">
        <img src="../../assets/tishi1.png" class="icon" alt="" />
        {{ $t("yjfy") }}
      </div>
      <div class="right">{{prams.amount}}</div>
    </div> -->
    <!-- <div class="rise font15 fontw center">+ 0</div> -->
    <div class="fixedBtn" v-if="showGMpageClass == 1" @click="handleQR">
      <img class="icon" src="../../assets/shangshengqushi.png" alt="" />
      {{ $t("kd") }}
    </div>
    <div class="fixedBtn2" v-if="showGMpageClass == 2" @click="handleQR">
      <img class="icon" src="../../assets/xiajiangqushi.png" alt="" />
      {{ $t("kk") }}
    </div>
    <!-- <div class="fixedBtn3"  @click="handleQRMN">
      {{ $t("mn") }}
    </div> -->
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted, defineProps, reactive } from "vue";
import {guessBet,userInfo} from '@/api/api'
import { showToast ,Popover } from 'vant';
import { userStore } from '@/stores/modules/user';
import i18n from '@/i18/index';
const isDark = ref(0);
const props = defineProps(["showGMpageClass",'confingList','guessDetails','checked']);
const emits = defineEmits(["close",'handle']);
const value = ref(0);
const userInfos = ref('')
const showPopover = ref(false)
const prams = reactive({
  symbol: "",
  amount: "",
  min: 0, //分钟
  code:"",
  riseFall: "", //1涨 2跌
});
const rate = ref('')
onMounted(() => {
  
  if (localStorage.getItem("isDark")) {
    isDark.value = localStorage.getItem("isDark");
  }
 
  getUserInfo()
  if(props.showGMpageClass){
    prams.riseFall = Number(props.showGMpageClass)
  }  
  if( props.guessDetails.symbol){
    prams.symbol = props.guessDetails.symbol
  }
 
});
const getUserInfo = ()=>{
  userInfo().then(res=>{
    console.log(res)
    if(res&&res.user){
      userInfos.value = res.user
    } 
  })
}
const close = () => {
  emits("close");
};
const handleQR = ()=>{
  if(!prams.min){
    showToast(i18n.global.t('xzjszq'))
    return
  }
  if(prams.amount>userInfos.value.usdtAmount){
    showToast(i18n.global.t('yebz'))
    return
  }
  if(prams.amount<5){
    
    showToast(i18n.global.t('zdjye5'))
    return
  }
  if(prams.amount>3000){
    showToast(i18n.global.t('jysx'))
    return
  }
  if(props.checked){
    prams.isSim =2
  }else{
    prams.isSim =1 
  }
  prams.amount = Number(prams.amount)
  prams.symbol = props.guessDetails.symbol
    guessBet(prams).then(res=>{
      if(res && res.code==10000){
        showToast(i18n.global.t('xdcg'))
        emits('handle',true)
        prams.amount = ''
      }else if(res && res.code==20000){
        showToast(res.i18NCode ?i18n.global.t(res.i18NCode):res.message);
      }
      console.log(res)
       
    })
}
const handleQRMN = ()=>{
  if(!prams.min){
    showToast(i18n.global.t('xzjszq'))
    return
  }
  if(prams.amount<userInfo.value.usdtAmount){
    showToast(i18n.global.t('yebz'))
    return
  }
  prams.amount = Number(prams.amount)
  prams.isSim =2
    guessBet(prams).then(res=>{
      if(res && res.code==10000){
        showToast(i18n.global.t('sqcg'))
      }else{
        showToast('network anomaly')
      }
      console.log(res)
       
    })
}
const selectChange = (item)=>{
  prams.min = Number(item.min)
  rate.value = Number(item.rate)
  showPopover.value = false
}
</script>
<style lang="less" scoped>
.gmPage {
  background: var(--backgroud);
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 13px;
  .header {
    display: flex;
    justify-content: space-between;
  }
  .card {
    background: var(--homeCardBg);
    margin: 15px 0 10px;
    padding: 10px;
    border-radius: 5px;
    .input {
      background: transparent;
      border: 0;
      width: 100%;
    }
  }
  .tstext {
    display: flex;
    font-size: 12px;
    line-height: 12px;
    justify-content: space-between;
    margin: 20px 0;
    .left {
      display: flex;
      align-items: center;
    }
    .icon {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
  .center {
    text-align: center;
  }
  .fixedBtn {
    font-size: 13px;
    line-height: 13px;
    color: #fff;
    width: calc(100% - 30px);
    text-align: center;
    padding: 10px 0;
    background-color: #5ac326;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    .icon {
      width: 15px;
      height: 15px;
      text-align: center;
      margin-right: 10px;
    }
  }
  .fixedBtn3{
    font-size: 13px;
    line-height: 13px;
    height: 35px;
    color: #fff;
    width: calc(100% - 40px);
    text-align: center;
    padding: 10px 0;
    background-color: #4299c4;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    bottom: 30px;
  }
  .fixedBtn2 {
    font-size: 13px;
    line-height: 13px;
    color: #fff;
    width: calc(100% - 30px);
    text-align: center;
    padding: 10px 0;
    background-color: #c54e39;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    .icon {
      width: 15px;
      height: 15px;
      text-align: center;
      margin-right: 10px;
    }
  }
}
.sliderModel {
  position: relative;
  .value {
    color: var(--tradeGL);
    position: absolute;
    right: 0;
    top: 50%;
    width: calc(50% - 20px);
    font-size: 13px;
    z-index: 9;
  }
  .line {
    height: 61%;
    width: 1px;
    box-shadow: 1px 0px 8px 1px #ffffff17;
    position: absolute;
    top: 50%;
    background: #65687140;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.selectItem{
  width: 150px;
  text-align: center;
  line-height: 35px;
  font-size: 13px;
  border-bottom: 1px solid #cccccc1c;
}
.selectClass{
  width: 100%;
    box-sizing: border-box;
    height: 35px;
    line-height: 35px;
    background-color: var(--inputBg);
    border-radius: 5px;
    border: 0;
    color: var(--inputText);
    padding: 0 10px;
    font-size: 12px;
}
</style>
<style>
.slider {
  .van-slider__bar {
    background: var(--silderBg) !important;
  }
  .custom-button {
    width: 20px;
    height: 20px;
    opacity: 0 !important;
  }
}
.van-slider {
  background: #85868752 !important;
  border-radius: 5px;
}
.van-popover__wrapper{
  width: 100%;
}
</style>